<script setup>
	import { onLoad, onPageScroll } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue'
	import { useUserStore } from '@/store/user'
	
	const loading = ref(false)
	const user = useUserStore()
	const config = getApp().globalData.config
	const statusHeight = ref(0)
	const menuHeight = ref(32)
	const contHeight = ref(66)
	const headOpacity = ref(0)
	const funcNavList = computed(() => {
		let fixedFunc = [
			{name: 'kefu-ermai', title: "联系客服", route: ''},
			{name: 'question-circle', title: "投诉/建议", route: ''},
			{name: 'setting', title: "设置", route: '/pages/user/set'}
		]
		return fixedFunc
	})
	function openPage(url) {
		if(url) uni.navigateTo({url})
		else uni.showToast({icon: 'none',title: '敬请期待！'})
	}
	
	onLoad(() => {
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		statusHeight.value = menuButtonInfo.top
		menuHeight.value = menuButtonInfo.height
		contHeight.value = menuButtonInfo.bottom + 10
		// #endif
		if(user.userId) {
			user.getInfoAction()
		}
	})
	onPageScroll((e) => {
		headOpacity.value = e.scrollTop > 120 ? 1 : e.scrollTop / 120
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head" :style="{backgroundColor: 'rgba(254, 109, 93, ' + headOpacity.toFixed(1) + ')', height: contHeight + 'px'}">
			<view :style="{ height: statusHeight + 'px' }"></view>
			<view class="head-box" :style="{height: menuHeight + 'px'}">
				<text>我的</text>
			</view>
		</view>
		<view class="app-content" :style="{paddingTop: contHeight + 32 + 'px'}">
			<view class="content-head">
				<uv-avatar :src="user.avatar && user.avatar.furl" size="128"></uv-avatar>
				<view class="info-box">
					<template v-if="user.userId">
						<view class="name uv-line-1">{{user.userId? user.nickname || '未设置' : '未登录'}}</view>
						<view class="remark uv-line-1">{{user.remark || '暂无个人简介'}}</view>
					</template>
					<view class="name" v-else @click="openPage('/pages/login')">点击登录</view>
				</view>
			</view>
			<view class="nav-box">
				<view class="nav-title">我的服务</view>
				<view class="nav-func">
					<template v-for="item in funcNavList" :key="item.title">
						<button class="uv-reset-button func-item" open-type="contact" v-if="item.title === '联系客服'" >
							<uv-icon :name="item.name" color="#666666" size="56"></uv-icon>
							<text>{{item.title}}</text>
						</button>
						<button class="uv-reset-button func-item" open-type="feedback" v-else-if="item.title === '投诉/建议'">
							<uv-icon :name="item.name" color="#666666" size="56"></uv-icon>
							<text>{{item.title}}</text>
						</button>
						<view v-else class="func-item" @click="openPage(item.route)">
							<uv-icon :name="item.name" color="#666666" size="56"></uv-icon>
							<text>{{item.title}}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		.app-head{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index: 10;
			padding-bottom: 10px;
			.head-box {
				padding: 0 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: var(--theme-xl);
				color: #FFFFFF;
				font-weight: 500;
			}
		}
		.app-content{
			min-height: 100vh;
			background-image: url('https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-12/1757643594974_mine.png');
			background-size: contain;
			background-repeat: no-repeat;
			padding-left: 24rpx;
			padding-right: 24rpx;
			.content-head{
				margin: 0 8rpx;
				display: flex;
				align-items: center;
				gap: 20rpx;
				color: #FFFFFF;
				.info-box{
					flex: 1;
					.name{
						font-weight: 600;
						font-size: var(--theme-xxl);
						line-height: var(--theme-xxl-line);
					}
					.remark{
						margin-top: 8rpx;
					}
				}
			}
			.nav-box{
				margin-top: 64rpx;
				padding: 24rpx 32rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				.nav-title{
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
				.nav-func{
					padding-top: 32rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 24rpx 42rpx;
					.func-item{
						margin: 0;
						width: 128rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 16rpx;
					}
				}
			}
		}
	}
</style>